<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex;  background: #666; margin-bottom: 20px;}
	.flex-box .flex-item{ width: 20%; background: blue; color: #FFF;}
	.flex-box .flex-item1{ height: 90px;}
	.flex-box .flex-item2{ height: 120px;}
	.flex-box .flex-item3{ height: 50px; line-height: 40px;}
	</style>
	<style type="text/css">
	.flex-box1{ align-items: stretch;}
	.flex-box2{ align-items: flex-start;}
	.flex-box3{ align-items: flex-end;}
	.flex-box4{ align-items: center;}
	.flex-box5{ align-items: baseline;}
	</style>
</head>
<body>
	<div>注:定义项目在交叉轴上如何对齐</div>
	<div>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度</div>
	<div class="flex-box flex-box1">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">我占满了高度</div>
	</div>
	<div>flex-start：交叉轴的起点对齐</div>
	<div class="flex-box flex-box2">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">我没有占满高度</div>
	</div>
	<div>flex-end：交叉轴的终点对齐</div>
	<div class="flex-box flex-box3">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>center：交叉轴的中点对齐</div>
	<div class="flex-box flex-box4">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>baseline: 项目的第一行文字的基线对齐</div>
	<div class="flex-box flex-box5">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	
</body>
</html>